<template>
	<view style="width:100%;height: 100%;">
		<view class="card-title ">
			应用工具
		</view>
		<view class="card-content" style="height: 70%;overflow: auto;">
			<view class="btn-style" @click="exceptionHandling()">异常发起</view>
		
			<view class="btn-style" @click="testCard()" v-if="processName == '振动成型'">刷卡登录</view>
		</view>
		<!-- 异常处理 -->
		<u-popup style="z-index: 99;" v-model="showexception" mode="center" width="80%" height="70%" border-radius="10"
			@close="close" @closePop="showexception=false">
			<exceptionHandling @close-popup="showexception=false"></exceptionHandling>
		</u-popup>


		<!-- 刷卡绑定工序 -->
		<u-popup style="z-index: 99;" v-model="processshow" mode="center" width="50%" height="500rpx" border-radius="10"
			@close="close" @closePop="processshow=false" :prevent="false">
			<u-form :model="form" ref="uForm" style="padding: 30rpx;">
				<u-form-item label="工号"><u-input v-model="form.workerCode" placeholder="请输入或者刷卡" />

				</u-form-item>

				<u-form-item label="工站">
					<u-radio-group v-model="form.stationName">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

			</u-form>
			<view style="margin-top: 50rpx;height: 100rpx;display: flex;">
				<u-button type="primary" style="width: 300rpx;margin-bottom: 10rpx;"
					@click="processConfirm()">确定</u-button>
				<u-button type="primary" :plain="true" style="width: 300rpx;" @click="modalCancel()">取消</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import exceptionHandling from '../exceptionHandling.vue'
	export default {
		name: 'btnTools',
		props: {
			currentProps: {
				typeof: Object,
				default: null
			}
		},
		components: {
			exceptionHandling
		},
		data() {
			return {
				showexception: false,
				processshow: false,
				form: {
					workerCode: "",
					stationName: ""
				},
				radioList: [{
					name: '成型一',
					value: '1'
				}, {
					name: '成型二',
					value: '2'
				}, {
					name: '成型三',
					value: '3'
				}, {
					name: '成型四',
					value: '4'
				}, {
					name: '成型五',
					value: '5'
				}],
				processName: ''
			}
		},
		created() {
			console.log('应用工具created', this.currentProps, this.isProcess('振动成型'))
			this.processName = (this.currentProps && this.currentProps.processName) || ''
		},
		methods: {
			// 提交异常
			exceptionHandling() {
				this.showexception = true;
			},
			// 测试刷卡登录
			testCard() {
				this.processshow = true;
			},
			// 方法中可以这样使用
			isProcess(process) {
				return this.currentProps && this.currentProps.processName == process;
			},
			// 刷卡选择工站
			processConfirm() {
				if (!this.isProcess('振动成型')) {
					return uni.showToast({
						title: '请在振动成型工序操作',
						icon: 'error'
					});
				}
				if (this.form.workerCode == '' || this.form.stationName == '') {
					return uni.showToast({
						title: '请选择工站或刷卡',
						icon: 'error'
					});
				} else {

					this.$u.api.addStation(this.form).then(res => {
						console.log('刷卡绑定', res)
						if (res.code == 200) {
							// this.restartNFC()
							// this.getCarList()
							// 刷卡保存之后更新列表
							uni.$emit('updateScanCardList')
							this.close()
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							});
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								icon: 'error'
							});
						}
					})
				}
			},
			// 弹框取消
			modalCancel() {
				// this.restartNFC()
				this.modalshow = false;
				this.processshow = false;
				this.form = {
					workerCode: '',
					stationName: ''
				}
			},
			close() {
				this.showexception = false;
				this.processshow = false;
				this.form = {
					workerCode: "",
					stationName: ""
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	::v-deep .card-title {
		line-height: 30px;
		position: relative;
		padding-left: 20px;
		font-size: 14px;
		font-weight: 600;
		font-style: italic;
		color: #ffaa00;
		border-bottom: 1px solid #e4e7ed;
	}

	.card-content {
		// position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		align-items: center;
		flex-direction: column;
		margin: 10px;

	}

	.btn-style {
		width: 40%;
		height: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 25rpx;
		color: white;
		background: #00aaff;
		cursor: pointer;
		margin: 5rpx;
		border-radius: 5px;
	}
</style>